<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :titleExplain="titleExplain"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon">
      <el-row style="padding: 0 24px 20px 24px">
        <el-col :span="24">
          <div class="secondaryTitle secondaryTitleTheme">投诉举报信息</div>
        </el-col>
      </el-row>
      <div style="padding: 0 24px 24px">
        <table cellspacing="0" cellpadding="0" class="detailTable">
          <tbody>
            <!-- 处理table-layout: fixed;第一行合并问题 -->
            <tr>
              <td class="title" style="padding: 0; border: none"></td>
              <td style="padding: 0; border: none"></td>
              <td class="title" style="padding: 0; border: none"></td>
              <td style="padding: 0; border: none"></td>
            </tr>
            <tr>
              <td class="title">项目名称</td>
              <td colspan="3">{{ info.complaint.projectName || '--' }}</td>
            </tr>
            <tr>
              <td class="title">纠纷类型</td>
              <td>{{ info.complaint.typeName || '--' }}</td>
              <td class="title">投诉时间</td>
              <td>{{ info.complaint.createTime || '--' }}</td>
            </tr>
            <tr>
              <td class="title">投诉人员</td>
              <td>{{ info.complaint.complainantName || '--' }}</td>
              <td class="title">投诉人员联系方式</td>
              <td>{{ info.complaint.tel || '--' }}</td>
            </tr>
            <tr>
              <td class="title">纠纷对象</td>
              <td>{{ info.complaint.defendant || '--' }}</td>
              <td class="title">纠纷对象联系方式</td>
              <td>{{ info.complaint.defendantTel || '--' }}</td>
            </tr>
            <tr>
              <td class="title">企业名称</td>
              <td>{{ info.complaint.companyName || '--' }}</td>
              <td class="title">统一社会信用代码</td>
              <td>{{ info.complaint.uscc || '--' }}</td>
            </tr>
            <tr>
              <td class="title">举报凭证</td>
              <td colspan="3">
                <span v-if="info.complaint.fileList.length > 0">
                  <span>已上传</span>
                  <el-link
                    type="primary"
                    class="seeSty"
                    @click="toUploadFile('complaint')"
                    >查看</el-link
                  >
                </span>
                <span v-else>未上传</span>
              </td>
            </tr>
            <tr>
              <td class="title">纠纷内容</td>
              <td colspan="3">{{ info.complaint.content || '--' }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="spacing"></div>
      <el-row
        style="padding: 20px 24px 0px 24px"
        v-if="info.complaintHandles.length > 0"
      >
        <el-col :span="24">
          <div class="secondaryTitle secondaryTitleTheme">处理内容</div>
        </el-col>
      </el-row>
      <div class="dealBtn">
        <el-button
          class="commonBut saveBtn funComBut"
          icon="icon iconfont icontianjia"
          :loading="isSaveLoading"
          v-if="loginType == 'JC'"
          @click="goDeal"
          ><span class="opetareText">添加处理</span></el-button
        >
      </div>
      <div class="infoList">
        <div class="infoBox" v-if="info.complaintHandles.length > 0">
          <el-steps direction="vertical">
            <el-step
              v-for="(item, index) in info.complaintHandles"
              :key="item.id"
              :title="`处理时间：${item.createTime}`"
            >
              <span slot="description">
                <span class="infosItem"
                  >处理人员：{{ item.handlerName || '--' }}</span
                >
                <span class="infosItem" style="margin-left: 26px"
                  >附件：
                  <span v-if="item.file.length > 0">
                    <span>已上传</span>
                    <el-link
                      type="primary"
                      class="seeSty"
                      @click="toUploadFile(index)"
                      >查看</el-link
                    >
                  </span>
                  <span v-else>未上传</span>
                </span>
                <p class="infosItem">处理结果：{{ item.content || '--' }}</p>
              </span>
            </el-step>
          </el-steps>
        </div>
        <div class="noDeduction" v-else>
          <img src="../../../static/img/noData.png" alt />
          <div class="text">暂无进展记录</div>
        </div>
      </div>
      <contractEnclosureDialog
        v-if="uploadContract"
        :dialogTitle="tableTitle"
        :tableData="tableData"
        @closeDialog="hiddenDialog"
      ></contractEnclosureDialog>
      <!-- <div class="dealBtn">
            <el-button
            type="primary"
            class="commonBut saveBtn"
            :loading="isSaveLoading"
            v-if="loginType=='JC'"
            @click="goDeal"
            >处理</el-button>
            <el-button class="commonBut" @click="goBack">取消</el-button>
        </div> -->
    </div>

    <el-dialog
      title="处理纠纷"
      :visible.sync="dialogFormVisible"
      width="640px"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
    >
      <el-form
        :model="form"
        label-width="120px"
        class="mrT8"
        ref="form"
        :rules="formRules"
      >
        <el-row class="row-padding-bottom">
          <el-form-item label="处理内容：" prop="content">
            <el-input
              type="textarea"
              v-model="form.content"
              placeholder="请输入，不超过1000个字"
              maxlength="1000"
              :autosize="{ minRows: 4, maxRows: 10 }"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row class="row-padding-bottom">
          <el-col :span="24" class="col-position">
            <el-form-item
              label="上传附件："
              prop="upLoadFile"
              v-model="form.fileList"
            >
              <uploadAnnex
                :limitationFactor="limitationFactor"
                @getFile="getFile"
                :upLoadFile="upLoadFile"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" v-model="form.fileList">
            <uploadResult
              style="margin-left: 116px !important"
              :resultList="upLoadFile"
              @callBackResult="getFile"
            />
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelForm" class="cancel">取 消</el-button>
        <el-button type="primary" @click="saveForm" class="save"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'dealDispute',

  data() {
    return {
      titleText: '投诉举报处理',
      titleExplain: '',
      back: true,
      dialogFormVisible: false,
      isSaveLoading: false, // 保存loading

      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',

      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
      ],
      id: '',
      loginType: '',
      form: {
        content: '',
        fileList: '', //附件
      },
      info: {
        complaint: {
          fileList: [],
        },
        complaintHandles: [],
      },
      formRules: {
        content: [
          {
            required: true,
            message: '处理内容不能为空',
            trigger: 'blur',
          },
          {
            min: 1,
            max: 1000,
            message: '处理内容不超过500字',
            trigger: 'change',
          },
        ],
      },
      uploadContract: false,
      //附件
      limitationFactor: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传附件的个数设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFour', //自定义上传格式校验类型
        messagetip: '仅支持上传png、jpg、jpeg格式文件', //自定义报错提示语
        fileId: 'file', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'salaryExcelInsuranceForm', //自定义id解决一个页面包含多个上传附件
        messagetip:
          '上传格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，附件大小不超过5M，最多上传10个附件', //自定义报错提示语
        methodTip:
          '上传格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，附件大小不超过5M，最多上传10个附件', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
      },
      upLoadFile: [],
      tableData: [],
      tableTitle: '',
    }
  },
  created() {
    this.$store.commit('set_active_index', '/home/events/rightsList')
    this.$store.state.activeMenu = '/home/events/rightsList'
    this.$store.commit('GOBACK_NAME', {
      oldUrl: '/home/events/rightsList',
      newUrl: this.$router.currentRoute.fullPath,
    })
    this.loginType = localStorage.getItem('loginType')
    this.id = this.$route.query.id
    this.getDetail(this.id)
  },
  activated() {},
  methods: {
    getDetail(id) {
      this.axios({
        method: 'post',
        url: 'api-r/rightscomplaint/expand/detail',
        data: {
          rightsComplaintId: id,
        },
      })
        .then((response) => {
          this.info.complaint = response.data.result.complaint
          this.info.complaintHandles = response.data.result.complaintHandles
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    addInsurance() {
      this.$router.push({ name: 'addInsurance' })
    },
    goDeal() {
      this.form.content = ''
      this.upLoadFile = []
      this.dialogFormVisible = true
    },
    saveForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false
          var fileJson = JSON.stringify(this.upLoadFile)
          this.axios({
            method: 'post',
            url: 'api-r/rightscomplainthandle/expand/add',
            data: {
              complaintId: this.id,
              content: this.form.content,
              fileJson: fileJson,
            },
          })
            .then((response) => {
              if (!response.data.hasError) {
                this.getDetail(this.id)

                this.$message({
                  type: 'success',
                  message: '保存成功',
                })
                //this.$router.push({name:'rightsList'})
              } else {
                this.$message({
                  type: 'error',
                  message: response.data.errorMsg,
                })
              }
            })
            .catch((error) => {
              //this.$message.error("保存失败");
              this.$message.error('数据获取失败')
              this.isSaveLoading = false
            })
        } else {
        }
      })
    },
    getFile(val) {
      this.upLoadFile = val
    },
    goBack() {
      this.$router.push('/home/events/rightsList')
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/events/rightsList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    cancelForm() {
      this.dialogFormVisible = false
      this.$refs['form'].resetFields()
    },
    toUploadFile(val) {
      if (val == 'complaint') {
        this.tableData = this.info.complaint.fileList
        this.tableTitle = '举报凭证'
      } else {
        this.tableData = this.info.complaintHandles[val].file
        this.tableTitle = '附件'
      }
      this.uploadContract = true
    },
    hiddenDialog() {
      this.uploadContract = false
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  //   padding-left: 24px;
  //   padding-right: 24px;

  .dealBox {
    //   margin: 26px 0 0 50px;
    margin-top: 26px;
    font-size: 14px;
    .picBox {
      margin-right: 12px;
      text-align: right;
      .picStyle {
        width: 90px;
        height: 90px;
        .imgStyle {
          width: 100%;
          height: 100%;
        }
      }
      .picTipStyle {
        text-align: center;
      }
    }
  }
  .dealContent {
    font-size: 14px;
    //   margin-left: 50px;
  }
  .line {
    width: 100%;
    height: 2px;
    margin-bottom: 20px;
    background-color: #f5f7fa;
  }
  .dealDetail {
    .rightAlign {
      text-align: left;
    }
    .content {
      color: #2a2a2a;
      text-align: left;
    }
  }
  .dealBtn {
    margin-left: 24px;
    margin-top: 16px;
  }
}

.nav ul {
  list-style: none;
}

.nav li {
  display: block;
  float: left;
}
//   /deep/ .el-dialog__footer {
//     background: #fff;
//     padding-bottom: 70px;
//   }
.labelWidth {
  font-size: 14px;
  color: #666666;
  display: inline-block;
  height: 36px;
  text-align: right;
  width: 126px;
  float: left;
}
.information {
  font-size: 14px;
  color: #151515;
  // display: block;
  // width: 98%;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.informationbox {
  font-size: 14px;
  color: #151515;
  // display: block;
  margin-bottom: 30px;
  max-height: 50px;
  overflow: auto;
  // width: 98%;
  // text-overflow: -o-ellipsis-lastline;
  // overflow: hidden;
  // text-overflow: ellipsis;
  display: -webkit-box;
  // -webkit-line-clamp: 2;
  // line-clamp: 2;
  // -webkit-box-orient: vertical;
}
.infoList {
  padding: 16px 24px;
  .infoBox {
    border: 1px solid #eef0f2;
    padding: 18px 26px 0px 26px;
  }
}
// 修改步骤条样式
/deep/ .el-steps {
  word-break: break-all;
  .el-step__icon.is-text {
    border: none;
    background-color: #eee;
    border-radius: 50%;
    width: 10px;
    height: 10px;
  }
  .el-step__icon-inner {
    display: none;
  }
  .el-step__line {
    background-color: #eee;
    left: 4px !important;
    top: 9px !important;
    bottom: -8px !important;
  }
  .el-step__title {
    font-size: 12px;
    color: #999;
  }
  .el-step__description {
    margin-bottom: 36px;
    font-size: 14px;
    color: #333;
    .infosItem {
      margin-top: 5px;
      line-height: 16px;
    }
  }
}
.noDeduction {
  text-align: center;
  margin-top: 48px;
  font-size: 16px;
  font-weight: 400;
  img {
    width: 160px;
    margin-bottom: 15px;
  }
  .text {
    color: #3a3a3a;
  }
}
.seeSty {
  margin-top: -2px;
}
</style>
